<template>
  <div class="SWDZMX_Map">
    <LeftFoldPanel :isHeight="true">
      <CardItem title="两委一队" height="30%">
        <LwydList></LwydList>
      </CardItem>
      <CardItem title="脱贫攻坚" height="30%">
        <TpgjList :statisticData="props.statisticData"></TpgjList>
      </CardItem>
      <CardItem title="民生保障" height="40%">
        <MsbzList :statisticData="props.statisticData"></MsbzList>
      </CardItem>
    </LeftFoldPanel>
    <RightFoldPanel :isHeight="true">
      <CardItem title="人员类别" height="40%">
        <WgxxList @handleRylb="handleRylb"></WgxxList>
      </CardItem>
      <CardItem title="人员名单" height="60%">
        <HzxxList @openPanel="openPanel" :rylb="rylb"></HzxxList>
      </CardItem>
    </RightFoldPanel>
    <BtmFoldPanel :isFolded="isFolded">
      <BtmList @closePanel="closeBtm" :row="row" :rylb="rylb"></BtmList>
    </BtmFoldPanel>
    <!-- <el-dialog v-model="dialog.visible" class="customDialog" :title="dialog.title" width="500px">
      <el-table class="zylbTable" :highlight-current-row="false" :data="tableData" style="width: 100%">
      </el-table>
    </el-dialog> -->
  </div>
</template>

<script setup lang="ts">
import LeftFoldPanel from '@/components/LeftFoldPanel.vue';
import BtmFoldPanel from '@/components/BtmFoldPanel.vue';
import CardItem from '@/components/CardItem.vue';
import LwydList from './xczy/LwydList.vue';
import RightFoldPanel from '@/components/RightFoldPanel.vue';
import TpgjList from './xczy/TpgjList.vue';
import MsbzList from './xczy/MsbzList.vue';
import WgxxList from './xczy/WgxxList.vue';
import HzxxList from './xczy/HzxxList.vue';
import BtmList from './xczy/BtmList.vue';
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const $szxcapi = (proxy as any)?.$szxcapi;
import useMapStore from '@/store/modules/map';

const country = ref(inject('countryText'));

const props = defineProps({
  statisticData: {
    type: Object,
    default: () => {}
  }
});
const row = ref({});
// const dy = [
//   {
//     title: '姓名',
//     value: 'name'
//   },
//   {
//     title: '姓名',
//     value: 'name'
//   },
//   {
//     title: '姓名',
//     value: 'name'
//   },{
//     title: '姓名',
//     value: 'name'
//   }
//   ,{
//     title: '姓名',
//     value: 'name'
//   }
// ];
const dialog = reactive<DialogOption>({
  visible: false,
  title: '详情信息'
});
const tableData = ref([]);
const rylb = ref('户籍人口');
const handleRylb = async (e) => {
  rylb.value = e;
  // const params = {
  //   'ssc': country.value,
  //   'rylb': rylb.value
  // };
  // const res = await $szxcapi.ryxqQuery(params);
  // tableData.value = res.rows;
  // dialog.visible = true;
};
const isFolded = ref(true);
const closeBtm = () => {
  isFolded.value = true;
};
const openPanel = (e) => {
  console.log('e', e);
  // 进行房屋查询
  initFw(e);
  // 弹窗显示
  row.value = e;
  isFolded.value = false;
};
const initFw = async (e) => {
  const params = {
    'hh': e.hh
  };
  // const data = await $szxcapi.fwbhQuery(params);
  // const data = await $szxcapi.fwbhQuery(params);
  console.log('查询服务编号房屋数据');
};
const init = async () => {};
// const country = ref(useMapStore().szxcCountryText);
onMounted(async () => {
  await nextTick();
  init();
});
// watch(
//   () => useMapStore().szxcCountryText,
//   (value) => {
//     country.value = value;
//     init();
//   }
// );

// watch(
//   () => props.statisticData,
//   (value) => {
//     detail.value = props.statisticData;
//   },
//   {
//     immediate: true,
//     deep: true
//   }
// );
</script>

<style lang="scss" scoped></style>
